import * as React from "react";
const themes = {
  light: {
    name: "light",
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    name: "dark",
    foreground: "#ffffff",
    background: "red",
  },
};
const ThemeContext = React.createContext(themes.dark);
export default function Context() {
  const [theme, setTheme] = React.useState(themes.dark);
  //点击事件 改变Context内容
  const handleClick = () => {
    if (theme.name === "dark") {
      setTheme(themes.light);
    } else {
      setTheme(themes.dark);
    }
  };
  return (
    <>
      <ThemeContext.Provider value={theme}>
        <Button render={handleClick}></Button>
      </ThemeContext.Provider>
    </>
  );
}

interface Props {
  render: () => void;
}

function Button(props: Props) {
  const theme = React.useContext(ThemeContext);
  return (
    <button
      style={{
        background: theme.background,
        color: theme.foreground,
      }}
      onClick={props.render}
    >
      {theme.name}
    </button>
  );
}
